<!DOCTYPE html>
<html>
<head>
    <title>模板</title>
    <!--<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/layui/css/layui.css">-->
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/all.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/adminLTE/css/OverlayScrollbars.min.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="../../statics/plugins/layui2.5.6/css/layui.css">
    <script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/layer/layer.js"></script>
    <script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
    <script src="${request.contextPath}/statics/libs/vue.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="${request.contextPath}/statics/plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="${request.contextPath}/statics/js/common.js"></script>
    <script src="../../statics/plugins/layui2.5.6/layui.js"></script>

</head>
<body>
<section class="content">
    <div class="container-fluid">
        <div class="row" style="height: 400px;margin-top: 5px;">
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">南区大屏</h4>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body"style="height: 80%;padding: 0;">
                        <div class="row" style="height: 100%;">
                            <div class="col-md-12" style="height: 100%;">
                                <div style="width: 68%;height: 97%;margin-left: 1%;margin-top: 1%;float: left;background-color: #2b2b2b">
                                    <img id="dapingpic"src="../../statics/css/img/holdon2.gif" style="width: 100%;height: 100%;">
                                </div>
                                <div style="width: 29%;height: 89%;margin-left: 1%;margin-top: 1%;float: left;">
                                    <div style="border-bottom:1px solid #ccc;height: 10%;padding-top: 3%;padding-left: 1%" >当前推送模式：<input type="radio" name="modelbig" value="0" checked onclick="dapingsendS(this)">自动<input type="radio" name="modelbig" value="1" style="margin-left: 15%;" onclick="dapingsendS(this)">手动</div>
                                    <div id="statusbigS" style="height: 10%;padding-top: 3%;padding-left: 1%">当前屏幕状态：</div>

                                </div>

                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>

                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">北区大屏</h4>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body"style="height: 80%;padding: 0;">
                        <div class="row" style="height: 100%;">
                            <div class="col-md-12" style="height: 100%;">
                                <div style="width: 68%;height: 97%;margin-left: 1%;margin-top: 1%;float: left;background-color: #2b2b2b">
                                    <img id="dapingpicN"src="../../statics/css/img/holdon2.gif" style="width: 100%;height: 100%;">
                                </div>
                                <div style="width: 29%;height: 89%;margin-left: 1%;margin-top: 1%;float: left">
                                    <div style="border-bottom: solid 1px #ccc;height: 10%;padding-top: 3%;padding-left: 1%" >当前推送模式：<input type="radio" name="modelbigN" value="0" checked onclick="dapingsendN(this)">自动<input type="radio" name="modelbigN" value="1" style="margin-left: 15%;" onclick="dapingsendN(this)">手动</div>
                                    <div id="statusbigN"style="height: 10%;padding-top: 3%;padding-left: 1%">当前状态：</div>

                                </div>

                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>

                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
        <div class="row" style="height: 400px;margin-top: 5px;">
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">南区车位诱导屏</h4>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body"style="height: 80%;padding: 0;">
                        <div class="row" style="height: 100%;">
                            <div class="col-md-12" style="height: 100%;">
                                <div id="infoS"style="overflow-y:hidden;text-align: left;font-size:80px;width: 60%;height: 97%;margin-left: 1%;margin-top: 1%;float: left;background-color: #2b2b2b;color: green;">
                                    <p>&nbsp;&nbsp;剩余车位</p>
                                    <p>&nbsp;&nbsp;大车位:<span id="bigparking">000</span></p>
                                    <p>&nbsp;&nbsp;小车位:<span id="smallparking">000</span></p>
                                </div>
                                <div style="width: 35%;height: 97%;margin-left: 1%;margin-top: 1%;float: left">
                                    <div id="tiaojian1SN"style="border-bottom: solid 1px #ccc;height: 12%;padding-top: 3%;padding-left: 1%" >当前推送模式：<input type="radio" name="model" value="0" checked onclick="xiaopingsendS(this)">自动<input type="radio" name="model" value="1" style="margin-left: 15%;" onclick="xiaopingsendS(this)">手动</div>
                                    <div id="div1" style="border-bottom: solid 1px #ccc;height: 74%;padding-top: 2%;padding-left: 1%;">
                                        <p id="tiaojian2SN"style="margin-top: 20px !important;">请选择字体大小：<input type="radio" name="fz" value="60" checked onclick="tishiS(this)">24px<input type="radio" name="fz" value="80" style="margin-left: 8%;"onclick="tishiS(this)">32px</p>
                                        <p id="tiaojian3SN"style="margin-top: 20px !important;">请选择字体颜色：<input type="radio" name="fc" value="0">红色<input type="radio" name="fc" value="1" style="margin-left: 8%;"checked>绿色<input type="radio" name="fc" value="2" style="margin-left: 8%;">黄色</p>
                                        <p style="margin-top: 20px !important;">请输入推送内容：</p>
                                        <input id="tiaojian4SN"type="text" style="width:100%;color: black;">
                                        <p id="tishi1S"style="color: red">最多推送32个字</p>
                                        <p id="tishi2S"style="color: red; display:none;">最多推送20个字</p>
                                    </div>
                                    <div id="div2" style="height: 12%;padding-top: 2%;padding-left: 1%"><button  style="float: right;margin-right: 3%;background-color: #00C0EE;border-radius: 5px;border: 2px solid #00cdff;width: 50px;color: white;" onclick="sengInfoSmallS()">发送</button></div>
                                </div>

                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>

                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
            <div class="col-md-6" style="height: 100%;">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        <h4 class="card-title">北区车位诱导屏</h4>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body"style="height: 80%;padding: 0;">
                        <div class="row" style="height: 100%;">
                            <div class="col-md-12" style="height: 100%;">
                                <div id="infoN" style="overflow-y:hidden;text-align: left;font-size:80px;width: 60%;height: 97%;margin-left: 1%;margin-top: 1%;float: left;background-color: #2b2b2b;color: green;">
                                    <p>&nbsp;&nbsp;剩余车位</p>
                                    <p>&nbsp;&nbsp;大车位:<span id="bigparkingN">000</span></p>
                                    <p>&nbsp;&nbsp;小车位:<span id="smallparkingN">000</span></p>
                                </div>
                                <div style="width: 35%;height: 97%;margin-left: 1%;margin-top: 1%;float: left">
                                    <div id="tiaojian1N"style="border-bottom: solid 1px #ccc;height: 12%;padding-top: 3%;padding-left: 1%" >当前推送模式：<input type="radio" name="modelN" value="0" checked onclick="xiaopingsendN(this)">自动<input type="radio" name="modelN" value="1" style="margin-left: 15%;" onclick="xiaopingsendN(this)">手动</div>
                                    <div id="div1N" style="border-bottom: solid 1px #ccc;height: 74%;padding-top: 2%;padding-left: 1%;">
                                        <p id="tiaojian2N"style="margin-top: 20px !important;">请选择字体大小：<input type="radio" name="fzN" value="60" checked onclick="tishiN(this)">24px<input type="radio" name="fzN" value="80" style="margin-left: 8%;"onclick="tishiN(this)">32px</p>
                                        <p id="tiaojian3N"style="margin-top: 20px !important;">请选择字体颜色：<input type="radio" name="fcN" value="0">红色<input type="radio" name="fcN" value="1" style="margin-left: 8%;"checked>绿色<input type="radio" name="fcN" value="2" style="margin-left: 8%;">黄色</p>
                                        <p style="margin-top: 20px !important;">请输入推送内容：</p>
                                        <input id="tiaojian4N"type="text" style="width:100%;color: black;">
                                        <p id="tishi1N"style="color: red">最多推送32个字</p>
                                        <p id="tishi2N"style="color: red; display:none;">最多推送20个字</p>
                                    </div>
                                    <div id="div2N" style="height: 12%;color: white;padding-top: 2%;padding-left: 1%"><button style="float: right;margin-right: 3%;background-color: #00C0EE;border-radius: 5px;border: 2px solid #00cdff;width: 50px;color: white;"  onclick="sengInfoSmallN()">发送</button></div>
                                </div>

                            </div>
                            <!-- /.col -->
                        </div>
                        <!-- /.row -->
                    </div>

                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
</section>

</body>
<script>
    var xiaopingNgengxin;
    var dapingNgengxin;
    var xiaopingNgengxinN;
    var dapingNgengxinN;
    $(function(){
        clearInterval(xiaopingNgengxin);
        clearInterval(dapingNgengxin);
        clearInterval(xiaopingNgengxinN);
        clearInterval(dapingNgengxinN);
        getcountS();
        gengxinpicS();
        getcountN();
        gengxinpicN();
        xiaopingNgengxin = setInterval(getcountS,30000);
        dapingNgengxin = setInterval(gengxinpicS,60000);
        xiaopingNgengxinN = setInterval(getcountN,30000);
        dapingNgengxinN = setInterval(gengxinpicN,60000);
    });
</script>
<script>
    //小屏自动 手动推送 配置---南区
    function xiaopingsendS(obj){
        var val = $(obj).val();
        if(val == 0){//启动自动推送
            //将车位接口自动推送标识位改成1
            var type = "sm1";
            $.get(baseURL + "screen/push/setScreenStatus/"+type, function(r){

            });
            //获取车位接口中车位剩余数，表示到页面---10s一次
            //getcountS();
            //clearInterval(xiaopingNgengxin);
            //xiaopingNgengxin = setInterval(getcountS,60000);

        }else if(val == 1){//关闭自动推送
            //清除定时任务
            //clearInterval(xiaopingNgengxin);
            var type = "sm2";
            $.get(baseURL + "screen/push/setScreenStatus/"+type, function(r){

            });
            //设置static中的标识
        }
    }
    //小屏自动 手动推送 配置---北区
    function xiaopingsendN(obj){
        var val = $(obj).val();
        if(val == 0){//启动自动推送
            //将车位接口自动推送标识位改成1
            var type="nm1";
            $.get(baseURL + "screen/push/setScreenStatus/"+type, function(r){

            });
            //获取车位接口中车位剩余数，表示到页面---10s一次
            //getcountN();
            //clearInterval(xiaopingNgengxinN);
            // xiaopingNgengxinN = setInterval(getcountN,60000);

        }else if(val == 1){//关闭自动推送
            //清除定时任务
            //clearInterval(xiaopingNgengxinN);
            var type="nm2";
            $.get(baseURL + "screen/push/setScreenStatus/"+type, function(r){

            });
            //设置static中的标识
        }
    }
    function getcountS(){
        //获取车位数static数据
        $.get(baseURL + "screen/push/getParkCountS", function(r){
            var list = r.list;
            $("#bigparking").html(list[0]);
            $("#smallparking").html(list[1]);
        });

    }
    function getcountN(){
        //获取车位数static数据
        $.get(baseURL + "screen/push/getParkCountN", function(r){
            var list = r.list;
            $("#bigparkingN").html(list[0]);
            $("#smallparkingN").html(list[1]);
        });
    }
    //提示信息的显示--南区
    function tishiS(obj){
        if($(obj).val()==24){
            $("#tishi1S").css("display","");
            $("#tishi2S").css("display","none");
        }else{
            $("#tishi2S").css("display","");
            $("#tishi1S").css("display","none");
        }
    }
    //提示信息的显示--北区
    function tishiN(obj){
        if($(obj).val()==24){
            $("#tishi1N").css("display","");
            $("#tishi2N").css("display","none");
        }else{
            $("#tishi2N").css("display","");
            $("#tishi1N").css("display","none");
        }
    }
    //小屏推送S
    function sengInfoSmallS(){
        var val1 = $("#tiaojian1SN input:checked").val();
        if(val1 == 0){
            alert("请先将推送模式设置为手动");
            return;
        }
        var val2 = $("#tiaojian2SN input:checked").val();
        var val3 = $("#tiaojian3SN input:checked").val();
        var color = "red";
        if(val3 == 1){
            color = "green";
        }else if (val3 == 2){
            color = "yellow";
        }
        var val4 = $("#tiaojian4SN").val();
        $("#infoS").html("<p style='color:"+color+";font-size: "+val2+"px;'>"+val4+"</p>");
        $.ajax({
            type: "POST",
            url: "../../screen/push/pushsmallS",
            data: {
                fontSize:val2,
                fontColor:val3,
                info:val4
            },
            success: function(n) {

            }
        });
    }
    //小屏推送N
    function sengInfoSmallN(){
        var val1 = $("#tiaojian1N input:checked").val();
        if(val1 == 0){
            alert("请先将推送模式设置为手动");
            return;
        }
        var val2 = $("#tiaojian2N input:checked").val();
        var val3 = $("#tiaojian3N input:checked").val();
        var color = "red";
        if(val3 == 1){
            color = "green";
        }else if (val3 == 2){
            color = "yellow";
        }
        var val4 = $("#tiaojian4N").val();
        $("#infoN").html("<p style='color:"+color+";font-size: "+val2+"px;'>"+val4+"</p>");
        $.ajax({
            type: "POST",
            url: "../../screen/push/pushsmallN",
            data: {
                fontSize:val2,
                fontColor:val3,
                info:val4
            },
            success: function(n) {

            }
        });
    }
    //大屏自动-手动配置
    function dapingsendS(obj){
        var val = $(obj).val();
        if(val == 0){
            //修改标识
            var type="sb1";
            $.get(baseURL + "screen/push/setScreenStatus/"+type, function(r){

            });
            //查询状态，更新截图
            //gengxinpicS();
            //clearInterval(dapingNgengxin);
            //dapingNgengxin = setInterval(gengxinpicS,60000);
        }else{
            //修改标识
            var type="sb2"
            $.get(baseURL + "screen/push/setScreenStatus/"+type, function(r){

            });
            //取消更新
            //clearInterval(dapingNgengxin);
        }
    }
    //大屏自动-手动配置
    function dapingsendN(obj){
        var val = $(obj).val();
        if(val == 0){
            //修改标识
            var type="nb1"
            $.get(baseURL + "screen/push/setScreenStatus/"+type, function(r){

            });
            //查询状态，更新截图
            // gengxinpicN();
            // clearInterval(dapingNgengxinN);
            // dapingNgengxinN = setInterval(gengxinpicN,60000);
        }else{
            //修改标识
            var type="nb2";
            $.get(baseURL + "screen/push/setScreenStatus/"+type, function(r){

            });
            //取消更新
            //clearInterval(dapingNgengxinN);
        }
    }
    //更新大屏图片
    function gengxinpicS(){
        $.ajax({
            type: "POST",
            url: "../../screen/push/pushbigS",
            data: {

            },
            success: function(r) {
                var list = r.list;
                if(list.length ==1){
                    $("#statusbigS").html("当前屏幕状态：离线");
                }else{
                    $("#statusbigS").html("当前屏幕状态：在线");
                    $("#dapingpic").attr("src","/image1/"+list[1]);
                }

            }
        });
    }
    //更新大屏图片--北区
    function gengxinpicN(){
        $.ajax({
            type: "POST",
            url: "../../screen/push/pushbigN",
            data: {

            },
            success: function(r) {
                var list = r.list;
                if(list.length ==1){
                    $("#statusbigN").html("当前屏幕状态：离线");
                }else{
                    $("#statusbigN").html("当前屏幕状态：在线");
                    $("#dapingpicN").attr("src","/image2/"+list[1]);
                }

            }
        });
    }
</script>
</html>
<script src="${request.contextPath}/statics/plugins/adminLTE/js/adminlte.min.js"></script>